import 'package:flutter/material.dart';
import 'package:get/get.dart';

import 'logic.dart';
import 'state.dart';

class LoginPage extends StatefulWidget {
  const LoginPage({super.key});

  @override
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  final LoginLogic logic = Get.put(LoginLogic());
  final LoginState state = Get.find<LoginLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        // backgroundColor: const Color.fromARGB(40, 238, 241, 243),
        appBar: AppBar(
            title: const Text('登录'),
            backgroundColor: Colors.blue,
            centerTitle: true,
            // 禁用返回按钮
            automaticallyImplyLeading: false),
        body: Container(
            padding: const EdgeInsets.all(20),
            child: Column(mainAxisAlignment: MainAxisAlignment.start, children: [
              const Row(
                children: [Text('登录', style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold))],
              ),
              const SizedBox(height: 10),
              const Row(
                children: [Text('加入享+, 让生活更轻松', style: TextStyle(fontSize: 15))],
              ),
              const SizedBox(height: 30),
              Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Expanded(
                    child: TextField(
                      controller: state.phoneController.value,
                      keyboardType: TextInputType.phone,
                      maxLength: 11,
                      style: const TextStyle(fontSize: 16),
                      decoration: const InputDecoration(
                        labelText: '手机号',
                        hintText: '请输入手机号',
                      ),
                    ),
                  ),
                  ElevatedButton(
                      style: ElevatedButton.styleFrom(
                        backgroundColor: Colors.white,
                        shadowColor: Colors.transparent,
                        foregroundColor: const Color.fromARGB(255, 85, 145, 175),
                        minimumSize: const Size(100, 50),
                      ),
                      onPressed: () {
                        logic.getVerificationCode();
                      },
                      child: Obx(
                        () => state.isCountingDown.value
                            ? Text('${state.countdown.value} s后重新获取', style: const TextStyle(color: Colors.grey))
                            : const Text('获取验证码'),
                      )),
                ],
              ),
              const SizedBox(height: 8),
              Obx(() => TextField(
                    controller: state.codeController.value,
                    keyboardType: TextInputType.number,
                    maxLength: 6,
                    style: const TextStyle(fontSize: 16),
                    decoration: const InputDecoration(
                      labelText: '验证码',
                      hintText: '请输入6位验证码',
                    ),
                  )),
              const SizedBox(height: 8),
              const Row(children: [
                Text('未注册手机号经验证后将自动登录', style: TextStyle(fontSize: 12, color: Colors.grey)),
              ]),
              const SizedBox(height: 50),
              Row(children: [
                Expanded(
                    child: ElevatedButton(
                  style: ElevatedButton.styleFrom(
                    backgroundColor: const Color.fromARGB(255, 85, 145, 175),
                    minimumSize: const Size(100, 50),
                  ),
                  onPressed: () {
                    logic.submit();
                  },
                  child: const Text('登录', style: TextStyle(color: Colors.white, fontSize: 20)),
                ))
              ])
            ])));
  }

  @override
  void dispose() {
    Get.delete<LoginLogic>();
    super.dispose();
  }
}
